iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
0
Mobile Development

用 Flutter 開發一個 Android App 吧系列 第 14

用 Flutter 開發一個 Android App 吧 - Day 14. 首頁 - Hacker News

  • 分享至 

  • xImage
  •  

本系列同步發表在 個人部落格,歡迎大家關注~

現在各式各樣的資料都存放在雲端,App 本身不會存太多資訊,所以接 Web API 幾乎是現代 App 必然要作的事。

想當初高中的時候,聽個音樂都還要下載放到 MP3,現在都是各種串流阿...

--

欸!? 哪些 API 阿?

其實這階段總共有三個 API 要串接。
首先既然是 GitHub App,就一定要串接 GitHub API 拉~
其他分別是 Hacker News API 和 GitHub Trending API

而且說是串接,不過你也知道,如果有別人作好的套件,為何不用呢?

很幸運的是,前兩個 API,我會分別使用 githubhnpwa_client 這兩個套件。

而 GitHub Trending API 方面看來是必須自己架構程式碼了 ...
所以 GitHub Trending API 這部份,我打算放到這階段最後再講。

--

好拉,話不多說!
我直接進入主題吧~

首頁 - Hacker News

hnpwa_client 這個套件呢,其實它並不是直接整合官方的 Hacker News API,
而是連接 HNPWA api 這個 Project 的 API。

個人覺得原因在於:

  1. HNPWA api 是專門為 PWA 或 Mobile App 設計的。
  2. 設計的比官方的 API 還好使用。

先來看一下 Commit

day14-1.jpeg

我修改的步驟很簡單:

  1. _HomePageState 裡寫 final HnpwaClient hnClient = HnpwaClient();,宣告 hnClient 這個變數方便在這個 State 裡面使用。
  2. 重寫(override) initState() 方法,並調用我自己寫的異步任務 fetchHNData()
  3. fetchHNData() 裡面調用 hnpwa_client 的方法 hnClient.news()hnClient.newest()
  4. 在 setState 函數裡指定值給 _hnTops_hnNews 這兩個變數。
    _hnTops = hnNew.items;
    _hnNews = hnNewest.items;
    

改完之後,在有連線狀態時一進到首頁就會讀取 Hacker News 囉~

day14-2.gif

開啟 Hack News 連結

這邊稍微再做一個簡易的功能,就是點擊 Hack News 的 ListTile 後會自動用瀏覽器開啟連結。

而達成此功能只須依賴另一個 Flutter Team 開發的套件 url_launcher
它會幫你自動的用你手機系統(iOS 跟 Android 都支援)預設的方式開啟 URL,不論是 http(s)mailtotelsms 都會處理喔~

day14-3.jpeg

lib/utils.dart

Future launchURL(url) async {
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

程式上非常簡單,在 ListTileonTap 調用 launchURL,這樣就可以囉~

--

今日成果

day14-4.gif

今天是進入第二階段的第一天,先小試身手,程式碼的部份並不難。
之後會慢慢進入最主要的 GitHub API 囉~


上一篇
用 Flutter 開發一個 Android App 吧 - Day 13. 登入頁面的圖片、App 縮圖
下一篇
用 Flutter 開發一個 Android App 吧 - Day 15. GitHub API 初體驗、倉庫頁(改)
系列文
用 Flutter 開發一個 Android App 吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言